
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>Merry Christmas</title>
		<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				color: white;
			}
			
			header {
				position: fixed;
				width: 100%;
				text-align: center;
				z-index: 9;
				/*border-top: dashed 2px white;
				border-bottom: dashed 2px white;*/
			}
			
			section {
				width: 100%;
				height: 500px;
				background-color: #E2353A;
				/*position: fixed;*/
				z-index: 2;
			}
			
			section nav {
				align-self: center;
				width: 100%;
				height: 100%;
				position: relative;
				overflow: hidden;
			}
			
			section nav img:nth-child(1) {
				position: absolute;
			}
			
			section nav img:nth-child(2) {
				position: absolute;
				bottom: 0;
				transform: rotate(180deg);
			}
			
			.textContent {
				background-color: #DBDBDD;
				box-sizing: border-box;
				padding: 20% 20px;
				transition: all 2s;
				overflow-y: scroll;
				border: 2px solid green;
				height: 100%;
				font-size: 15px;
			}
			
			.wish {
				position: fixed;
				bottom: 10%;
				width: 100%;
				z-index: 999;
			}
			
			footer {
				position: fixed;
				bottom: 0;
				width: 100%;
				z-index: 3;
			}
		</style>
		<!--字体效果-->
		<style>
			body .textcontainer {
				padding: 40px 0;
				text-align: center;
			}
			
			body .title {
				text-align: center;
				position: relative;
			}
			
			body .title.bubbles>.particle {
				opacity: 0;
				position: absolute;
				background-color: white;
				-webkit-animation: bubbles 3s ease-in infinite;
				animation: bubbles 3s ease-in infinite;
				border-radius: 100%;
			}
			
			@keyframes bubbles {
				0% {
					opacity: 0;
				}
				20% {
					opacity: 1;
					-webkit-transform: translate(0, -20%);
					transform: translate(0, -20%);
				}
				100% {
					opacity: 0;
					-webkit-transform: translate(0, -1000%);
					transform: translate(0, -1000%);
				}
			}
		</style>
	</head>

	<body>
		<header>
			<img src="images/leaves.png" width="100%" />
			<h3 class="bubbles title">Merry Christmas</h3>
		</header>
		<section>
			<nav class="snow" id="snow">
				<img src="images/top.png" width="200%" />
				<div class="textContent">
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 是该叫你艾斯，还是叫你泡泡呢，这是个值得思考的问题，虽然不知道你真正的名字，但这已经不重要了。 首先我要感谢比心App，让我认识这么有趣的你。下面要感谢你，之前每天回来都是一个人练吉他，打游戏， 认识你之后，有一天打开游戏，你猜怎么……已经很久没更新了，哈哈！ 有一句埋藏心里很久的话，一直没找着机会跟你讲，今天借助圣诞节，我一定要说： 那天我跟你聊天的时候，我发现，你有一道灵光从天灵盖喷出来，从那时候我就告诉自己，你就是那个百 年一见的富婆啊！我后半辈子就交给你养活了！&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;End……
					<br /><br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 在这里，我要送你几句话：人生在世有几个知己，多少友谊能长存呢？希望我们珍惜彼此，守护初心，共创美 好的未来！
					<br />最后，祝：圣诞节快乐！Merry Christmas ！(我没有查单词的)
					<br /><span style="display: block;position: absolute;bottom: 20%;right: 20px;">————马吉克，哦不，曾小贤</span>
				</div>
				<div class="wish" align="center" hidden="hidden">&gt;&gt;&gt;&gt;&gt;点击许愿&lt;&lt;&lt;&lt;&lt;</div>
				<iframe src="star.html" width="100%" height="100%" style="position: fixed;z-index: 999;"></iframe>
				<audio src="audio/rain.mp3" autoplay="autoplay" loop="loop"></audio>
			</nav>
		</section>
		<footer>
			<img src="images/leaves.png" width="100%" />
		</footer>
		<script type="text/javascript">
			function getStyle(ele) {
				var style = null;
				if(window.getComputedStyle) {
					style = window.getComputedStyle(ele, null);
				} else {
					style = ele.currentStyle;
				}
				return style;
			}
			var heightW = window.screen.availHeight;
			var widthW = window.screen.availWidth;
			var section = document.querySelector("section");
			section.style.backgroundColor = "red";
			console.log(heightW);
			section.style.cssText = "height:" + heightW + "px";
			console.log(getStyle(section).height);
			//			//下雪特效
			//			var snowNum = 100; //雪花数量
			//			var snowOP = Math.random(); //雪花透明度
			//			for(var i = 0; i < snowNum; i++) {
			//				var snowSize = Math.ceil(Math.random() * 10); //雪花大小
			//				var locationX = Math.random() * widthW;
			//				var locationY = Math.random() * heightW;
			//				var snow = document.createElement("div");
			//				snow.className = "snow"
			//				snow.style.cssText = "width: " + snowSize + "px;height:" + snowSize + "px;position:absolute;top:0px;left:" + locationX +
			//					"px;background-color:white;border-radius:10px;box-shadow:0 0 8px #fff";
			//				section.querySelector("nav").appendChild(snow);
			//			}
			//			//雪花下落
			//			var snowIndex = 0;
			//			var snow = document.getElementsByClassName("snow");
			//			var speed = Math.random() * 10; //下雪速度
			//			setInterval(function() {
			//				$(snow).eq(1).animate({
			//					top: speed + "px"
			//				}, 300, function() {
			//					if(snowIndex >= snowNum) {
			//						snowIndex = 0;
			//					}
			//				})
			//				speed += 10;
			//			}, 1);
		</script>
		<script src="js/snow.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var snowS = document.getElementById("snowS");

			function IsPC() {
				var userAgentInfo = navigator.userAgent;
				var Agents = ["Android", "iPhone",
					"SymbianOS", "Windows Phone",
					"iPad", "iPod"
				];
				var flag = true;
				for(var v = 0; v < Agents.length; v++) {
					if(userAgentInfo.indexOf(Agents[v]) > 0) {
						flag = false;
						break;
					}
				}
				return flag;
			}

			function addAudio() {
				var audio = document.createElement('audio');
				audio.id = "audio";
				audio.loop = "loop";
				audio.autoplay = "autoplay";
				var source = document.createElement('source');
				source.src = 'audio/rain.mp3';
				source.setAttribute('type', 'audio/mpeg');
				audio.appendChild(source);
				document.querySelector("section").append(audio);
				setTimeout(function() {
					$("#audio").get(0).play();
				}, 300);
			}

			function fontShow(ele) {
				var font = $(ele).text();
				$(ele).text(""); //清空文本  为了填充处理后的文本
				var fontA = font.split("");
				console.log(font);
				//给每一个字体添加标签  方便操控
				for(var i = 0; i < fontA.length; i++) {
					var b = document.createElement("b");
					b.textContent = fontA[i];
					$(ele).append(b);
					b.style.opacity = "0";
					$(b).animate({
						"opacity": "1"
					}, 10 * i * 1)
				}

			}
			//			fontShow($(".textContent"));

			var snowS = document.createElement("script");
			if(IsPC()) {
				snowS.src = "js/snow.js";
				document.body.appendChild(snowS);
			} else {
				var snowC = document.createElement("link");
				snowC.href = "css/snow3.css";
				document.head.appendChild(snowC)
				snowS.src = "js/websnowjq.js";
				document.body.appendChild(snowS);
				snowS.onload = function() {
					$("#snow").websnowjq();
				}
			}
			addAudio();

			function bubbles() {
				$.each($(".title.bubbles"), function() {
					var bubblecount = ($(this).width() / 50) * 10;
					for(var i = 0; i <= bubblecount; i++) {
						var size = ($.rnd(40, 80) / 10);
						$(this).append('<span class="particle" style="top:' + $.rnd(20, 80) + '%; left:' + $.rnd(0, 95) + '%;width:' +
							size + 'px; height:' + size + 'px;animation-delay: ' + ($.rnd(0, 30) / 10) + 's;"></span>');
					}
				});
			}

			jQuery.rnd = function(m, n) {
				m = parseInt(m);
				n = parseInt(n);
				return Math.floor(Math.random() * (n - m + 1)) + m;
			}

			bubbles();

			function bjUpdate() {
				var colors = ["#435177", "#43776a", "#624377", "#86403a", "#d25b5b"]
				setInterval(function() {
					$(".textContent").css("background-color", colors[Math.ceil(Math.random() * colors.length)])
				}, 1000)
			}
			bjUpdate();

			function wish() {
				var wish = $(".wish");
				var flag = true;
				setInterval(function() {
					if(flag) {
						wish.fadeOut(300);
						flag = false;
					} else {
						wish.fadeIn(300);
						flag = true;
					}
				}, 600);
				$(".wish").click(function() {
					$(".textContent").remove();
					//open("star.html", "_self");
				})
			}
			setTimeout(function() {
				wish();
			}, 1000)
		</script>
	</body>

</html>